<template>
    <el-row >
        <el-col :span='12' class="dialog-main-body-box" >
            <div class="dialog-main-body-box-hd">未选部分</div>
            <draggable class="dialog-main-body-box-content right-content" v-model="data.noneSelected" group="box" animation="300">
                <transition-group class="dialog-box-group">
                    <div class="dialog-box-group-item" v-for="item in data.noneSelected" :key="item.val">{{ item.name }}</div>
                </transition-group>
            </draggable>
        </el-col>
        <el-col :span='12' class="dialog-main-body-box" >
            <div class="dialog-main-body-box-hd">已选部分</div>
            <div class="dialog-main-body-box-fixed" v-if="data.fixedFieldList.length">
                <div class="dialog-box-group-item is-disabled" v-for="item in data.fixedFieldList" :key="item.val">
                    {{ item.name }}
                </div>
            </div>
            <draggable class="dialog-main-body-box-content" v-model="data.selected" group="box" animation="300">
                <transition-group class="dialog-box-group">
                    <div class="dialog-box-group-item" v-for="item in data.selected" :key="item.val">
                        {{ item.name }}
                    </div>
                </transition-group>
            </draggable>
        </el-col>
    </el-row>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator';
import draggable from 'vuedraggable';
import { updateTableLayout } from '@/common/api/commonApi';

@Component({ name: 'RiskMonitorTableLayoutBox', components: { draggable } })
export default class RiskMonitorTableLayoutBox extends Vue {
    @Prop() noneSelected;
    @Prop() fixedFieldList;
    @Prop() selected;

    mounted() {
        this.data.noneSelected = JSON.parse(JSON.stringify(this.noneSelected));
        this.data.fixedFieldList = JSON.parse(JSON.stringify(this.fixedFieldList));
        this.data.selected = JSON.parse(JSON.stringify(this.selected));
    }

    @Watch('noneSelected', { deep: true })
    onWatchNoneSelected() {
        this.data.noneSelected = JSON.parse(JSON.stringify(this.noneSelected));
    }

    @Watch('selected', { deep: true })
    onWatchSelected() {
        this.data.selected = JSON.parse(JSON.stringify(this.selected));
    }

    private data = {
        noneSelected: [],
        fixedFieldList: [],
        selected: []
    };

    async onSubmit(tableName) {
        let resList: any = await new Promise((resolve, reject) => {
            this.$axios.post('/tableLayout/insert', {
                tableName: tableName,
                showField: JSON.stringify(this.data.selected.map(item => item.val)),
            }).then((res: any) => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
        return resList;
        // await updateTableLayout({
        //     tableName: tableName,
        //     showField: JSON.stringify(this.data.selected.map(item => item.val)),
        // });
    }
}
</script>
<style lang="scss" scoped>

.dialog-main-body-box {
    height: 100%;
    border: 1px solid #cacaca;
    border-radius: 2px;
    box-sizing: border-box;

    .dialog-main-body-box-hd {
        height: 30px;
        padding: 0 5px;
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
        color: rgba(0, 0, 0, 0.65);
    }

    .dialog-main-body-box-fixed {
        width: 100%;
        padding: 0 3px;
        border-top: 1px solid #cacaca;
    }
    & /deep/ {
        .dialog-main-body-box-content {
            width: 100%;
            height: 100%;
            padding: 0 5px 5px 5px;
            border-top: 1px solid #cacaca;

            .dialog-box-group {
                display: block;
                width: 100%;
                height: 100%;
                overflow-y: auto;
            }
        }

        .dialog-box-group-item {
            display: inline-block;
            margin: 3px;
            height: 30px;
            padding: 0 10px;
            border: 1px dashed #409eff;
            border-radius: 3px;
            line-height: 28px;
            color: rgb(102, 102, 102);
            background-color: #fff;
            cursor: move;
            user-select: none;

            &.is-disabled {
                background-color: rgb(230, 230, 230);
                cursor: no-drop;
            }
        }
    }
}
</style>
